<template>
<div id="cont">
	<div class="container">
		<div class="row">
			<div class="write">
				<!-- <div class="banner">
					<a href="javascript:" @click="setBanner" v-show="!isBanner">
						<svg fill="currentColor" viewBox="0 0 80 76" width="56px" height="56px">
							<path d="M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z"></path>
						</svg>
						<span>添加封面</span>
					</a>
					<div class="handler" v-show="isBanner">
						<svg style="fill:currentColor;width:20px; height:20px" @click="setBanner" class="icon" viewBox="0 0 80 76" ><path d="M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z"></path></svg>
						<svg style="fill:currentColor;width:20px;height:20px" @click="removeBanner" class="icon" viewBox="0 0 22 22"><path d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6L16.3,18.7L16.3,18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"></path><path d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"></path><path d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8C7.4,10.2,7.7,10,8,10c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"></path><path d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"></path></svg>
					</div>
					<img :src="banner">
				</div> -->
				<div class="title">
					<input type="text" v-model="title" placeholder="请输入标题">
				</div>
				<div class="content">
					<v-editor ref="editor" :content="content" @transmit="setBanner"></v-editor>
				</div>
				<div class="label">
					<p>选择合适的标签，方便分类检索，文章更容易让读者发现</p>
					<a href="javascript:" v-for="(label, k1) in labels" :key="k1" @click="select">{{ label.name }}</a>
				</div>
				<div class="col-2 right">
					<button type="button" class="btn default" @click="cancel">取消</button>
					<button type="button" class="btn blue" @click="addArticle">发布</button>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<script>
import vEditor from '@/components/Editor';
import vUpload from '@/components/Upload.vue';
import app from '@/utils';
import { labelList, articleEdit } from '@/api/article_api';
import { mapActions } from 'vuex';

export default {
  name: 'write',
  data() {
  	return {
			uid: '',  // 用户ID
			aid: '',  // 文章ID
      link: '',
      banner: [],
			title: '',
			content: '',
      imgLink: '',
  	  label: '',
      labels: [],
      isShow: false,
      isBanner: false
  	}
  },
  components: {
		vEditor,
		vUpload
	},
	created() {
		this.uid = this.$store.state.uinfo.id;
		const art = this.$route.params;
		console.log('80..............', art);
		this.title = art.title;
		this.content = art.content;
		this.banner = art.banner;
		this.aid = art._id;
		this.getLabel();
	},
  mounted() {
		this.$refs['editor'].setImg();
  },
  methods: {
		...mapActions([
			'SET_LABELS'
		]),
		// Set Banner
		setBanner(data) {
			console.log('98...........', data);
			this.banner.push(data);
			this.isBanner = true;
			// this.isShow = true;
			// let sure = this.$refs.sure,
			// 	cancel = this.$refs.cancel,
			// 	close = this.$refs.close;
			// close.onclick = () => {
			// 	this.isShow = false;
			// }
			// sure.onclick = () => {
			// 	let link = this.link;
			// 	if(!link) return app.flash('warning', '请输入图片链接~');
			// 	this.banner = link;
			// 	this.isBanner = true;
			// 	this.isShow = false;
			// }
    },
    // Remove banner
    removeBanner: function() {
      this.banner = '';
      this.isBanner = false;
    },
    // Get label
    getLabel() {
			const labels = this.$store.state.labels;
			if(labels && labels.length > 0) {
				this.labels = labels;
			}else {
				labelList().then(response => {
					const res = response.data;
					if(res.s) {
						this.labels = res.d;
						this.SET_LABELS(res.d);
					}
				})
			}
    },
    // Select label
    select: function(e) {
      let labels = e.target.parentNode.children,
          currentLabel = e.target.innerText;
      for(let i=0;i<labels.length;i++) {
        labels[i].style = 'background-color:#fff';
      }
      e.target.style = 'background-color:#aab2bd';
      this.labels.forEach((item) => {
        if(item.name == currentLabel) {
          this.label = item._id;
        }
      })
    },
    addArticle: function() {
      if(!this.title) return app.flash('warning','请输入标题~');
      if(!this.label.length) return app.flash('warning','请选择一个分类标签');
      // Get editzone content
			let content = document.getElementById('editzone');
			const params = {
				"author": this.uid,
				"title": this.title,
				"summary": content.innerText.slice(0,88),
				"content": content.innerHTML,
				"banner": this.banner,
				"label": this.label,
				"isBanner": this.isBanner
			};
			if(this.aid) {  // 如果aid存在，则判定为编辑已存在文章
				params['id'] = this.aid;
			}
			articleEdit(params).then(response => {
				const res = response.data;
				console.log('154...', res);
				if(res.s === 1) {
					app.flash('success','发布成功~');
				} 
			})
    },
		getImgFile(e) {
			console.log(e.target.files);
		},
		// 取消发布
		cancel() {
			console.log(this.$router);
			this.$router.back();
		}
  }
}
</script>

<style>
/**
 * write new article
 * @Banner @Title @Content @Label
 */
.write .banner {
  position:relative;
  width:100%;
  min-height:200px;
  overflow:hidden;
  text-align: center;
  background-color:#f6f7f8;
}
.write .banner .handler {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 8px;
  background-color: rgba(0,0,0,.6);
}
.write .banner .handler .icon {
  cursor: pointer;
  color: #eee;
  margin: 0 3px;
}
.write .banner .handler .icon:hover {
  color: #007fff;
}
.write .banner a {
  position:absolute;
  top:50%;
  left: 50%;
  min-width: 100px;
  margin-top: -50px;
  margin-left: -50px;
  color: #ddd;
}
.write .banner span {
  display: block;
}
.write .banner:hover a {
  color: #007fff;
}
/**
 * Title
 */
.write .title input {
  width: 100%;
  border: 0;
  padding: 15px;
  outline: none;
  font-size: 24px;
}
.write .title input::-webkit-input-placeholder {
  font-style: italic;
  font-size: 22px;
  color: #aab2bd;
}
/**
 * Label
 */
.write .label {
  margin: 30px 0;
  text-align: center;
  color: #666;
}
.write .label p {
  margin: 25px 0;
}
.write .label a {
  margin: 0 8px;
  padding: 2px 10px;
  border: 1px solid #aab2bd;
  border-radius: 18px;
  color: inherit;
  background-color: #f5f5f5;
}
</style>